<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.min.css')}}">
    <title>Title</title>
</head>
<body>
        <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">盯盘宝后台管理系统</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li ><a href="{{ url_for('start_web') }}">首页</a></li>
            <li ><a href="{{ url_for('permission_manage') }}">权限配置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    管理员{{ session['admin'] if session['admin'] else "未登录" }}
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ url_for("login_out") }}">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
            <div align="center">
        <div class="btn-group btn-group-lg" role="group" aria-label="...">
        <div class="btn-group" role="group" align="center">
        <button type="button" class="btn btn-primary" onclick="longLineStockPool()">长线股票池</button>
        </div>
        </div>
    </div>
<div align="center">
    <h3>股票池</h3>
    <div style="margin:auto">
    <select id = "date" class="form-control" style="margin:0px 20px 0px 0px;width:auto;">
    </select>
    </div>
    <br/>
    <br/>
</div>

<table colume="center" class="table table-striped table-bordered"  style="width:100%">
 <tr>
    <td>
    <div id="stock-pool-one" style="width: 600px;height:600px;">

    </div>
    </td>
    <td>
    <div id="stock-pool-two" style="width: 600px;height:600px;">

    </div>
    </td>
     <td>
    <div id="stock-pool-three" style="width: 600px;height:600px;">

    </div>
    </td>
 </tr>

</table>

<script type="text/javascript" >
function longLineStockPool() {
    window.open("./longLineStockPool");
}

function loadDate(){
        $.getJSON("/json",function (data) {
            var tradeDayList=data.trade_day;
            for (var i=0;i<tradeDayList.length;i++){
                var date=tradeDayList[i];
                if (date >= "2018-11-01"){
                    if (i==tradeDayList.length-1){
                        var html_str = "<option selected='selected' value='" + date + "'>" + date + "</option>";
                    }else{
                        var html_str = "<option value='" + date + "'>" + date + "</option>";
                    }
                    $('#date').append(html_str);
                }

            }
        })

    }
function addData(){
        var date = $("#date").val();
        $.ajax({
            url: "/stockPoolData",
            async:true,
            type:'POST',
            data:JSON.stringify({'date':date}),
            success: function (data) {
                    var obj = JSON.parse(data);
                    var stockPoolOne = obj.stock_pool_one;
                    var stockPoolTwo = obj.stock_pool_two;
                    var topTenStocks = obj.top_ten_stocks;
                    var stocksDict = obj.stock_dict;
                    var newToTopTenStocks = obj.new_to_top_ten_stocks;
                    var htmlStr = "";
                    htmlStr += "<h3>股票池1号</h3>";
                    htmlStr += "<p align=\"center\">出现了四连板后，后面三个交易日内收盘价跌破五日线(4点半更新)</p>";
                    htmlStr += "<p align='center' style='border:2px solid;'>";
                    for (var i = 0; i < stockPoolOne.length; i++) {
                        htmlStr += stockPoolOne[i] + "<br/>";
                    }
                    htmlStr += "</p>";
                    $("#stock-pool-one").html(htmlStr);

                    var htmlStr = "";
                    htmlStr += "<h3>股票池2号</h3>";
                    htmlStr += "<p align=\"center\">2号机器人，因为概念排名被排除的个股</p>";
                    htmlStr += "<p align='center' style='border:2px solid;'>";
                    for (var i = 0; i < stockPoolTwo.length; i++) {
                        htmlStr += stockPoolTwo[i] + "<br/>";
                    }
                    htmlStr += "</p>";
                    $("#stock-pool-two").html(htmlStr);

                    var htmlStr = "";
                    htmlStr += "<h3>股票池3号</h3>";
                    htmlStr += "<p align=\"center\">沪股通，深股通持续买入个股(6点更新)</p>";
                    htmlStr += "<p style='border:2px solid;float:left;'>";
                    htmlStr += "<b>十大买入个股:</b><br/>";
                    for (var i = 0; i < topTenStocks.length; i++) {
                        htmlStr += topTenStocks[i] + "<br/>";
                    }
                    htmlStr += "</p>";
                    htmlStr += "<p style='float:left;border:2px solid;'>";
                    htmlStr += "<b>连续买入天数</b>:<br/>";
                    for (var key in stocksDict) {
                        htmlStr += key + ":" + String(stocksDict[key]) + "<br/>";
                        }
                    htmlStr += "</p>";
                    htmlStr += "<p style='border:2px solid;float:left;'>";
                    htmlStr += "<b>新买入个股</b>:<br/>";
                    for (var i = 0; i < newToTopTenStocks.length; i++) {
                        htmlStr += newToTopTenStocks[i] + "<br/>";
                    }
                    htmlStr += "</p>";
                    $("#stock-pool-three").html(htmlStr);
            }
        });
    }
$("#date").change(function(){
    addData();
});

setTimeout(function () {
    addData();
},300);

loadDate();

</script>

<style type="text/css">
    #dataTable table tr:hover td { background-color: palegoldenrod; }
</style>
</body>
</html>